<template>
  <div class="content">
    <div class="main" id="morebar"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  data() {
    return {};
  },
  methods: {
    createEcharts() {
      var myChart = echarts.init(document.getElementById("morebar"));
      let option = {
        tooltip: {},
        // 标题样式
        title: {
          text: "标题",
          left: "center",
          top: "5%",
          textStyle: {
            fontSize: 16,
            fontFamily: "微软雅黑",
            color: "#333",
          },
        },
        // 图例的样式
        legend: {
          // 将图例放在底部
          y: "90%",
          // 设置图例之间 垂直上下（左右水平）距离
          itemGap: 60,
          icon: "rect",
          // 设置图列每一项的宽高
          itemWidth: 27,
          itemHeight: 20,
          textStyle: {
            //图例文字的样式
            color: "#333",
            fontSize: 14,
            fontFamily: "微软雅黑",
          },
        },
        dataset: {
          source: [
            ["product", "2020", "2021", "2022", "2023"],
            ["状态1", 43.3, 85.8, 93.7, 60],
            ["状态2", 83.1, 73.4, 55.1, 80],
            ["状态3", 86.4, 65.2, 82.5, 30],
          ],
        },
        // 柱状图的主体--的位置
        grid: [{ bottom: "16%" }],
        xAxis: {
          type: "category",
          // 坐标轴分隔线
          splitLine: {
            show: true,
          },
          axisLabel: {
            interval: 0,
            color: "#333",
            fontSize: 14,
          },
          // 轴线的样式
          axisLine: {
            lineStyle: {
              color: "#DDDDDD",
            },
          },
        },
        yAxis: {
          // 轴线的样式
          axisLine: {
            show: true,
            lineStyle: {
              color: "#DDDDDD",
            },
          },
          type: "value",
          // 坐标轴分隔线
          splitLine: {
            show: true,
          },
          axisLabel: {
            interval: 0,
            color: "#333",
            fontSize: 16,
          },
        },

        series: [
          { type: "bar", color: "#68A3D9" },
          { type: "bar", color: "#0672B8" },
          { type: "bar", color: "#DDEFF4" },
          { type: "bar", color: "#5EABC0" },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
  mounted() {
    this.createEcharts();
  },

  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
  },
};
</script>
<style  scoped>
.content {
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
}
.main {
  height: 100%;
  width: 100%;
}
</style>